<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card style="width: 100%; margin:10px 10px 0px 0px;display: flex;flex-direction: column;">
        <div class="header">
          <span class="span-title">线上热门搜索</span>
        </div>

        <div class="echartcard">
          <LineIndex />
          <div style="width:50%;border:1px solid #e2e2e2;">
            <div>
              <div class="main">
                <span class="span-title">人均搜索次数</span>
                <svg t="1637478175000" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2179" width="26" height="26">
                  <path
                    d="M536 480v192a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V480a16 16 0 0 1 16-16h16a16 16 0 0 1 16 16z m-32-128h16a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16z m8 448c159.056 0 288-128.944 288-288s-128.944-288-288-288-288 128.944-288 288 128.944 288 288 288z m0 48c-185.568 0-336-150.432-336-336s150.432-336 336-336 336 150.432 336 336-150.432 336-336 336z"
                    p-id="2180" fill="#8a8a8a"></path>
                </svg>
              </div>
              <div class="main">
                <span style=" font-size: 18px;font-weight: bold;margin-right: 50px;">
                  3.2</span>
                <span class="span-title">26.2
                  <svg t="1637478988225" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4331" width="16" height="16">
                    <path
                      d="M252.484267 566.749867h11.776v16.6912h-11.776zM815.684267 566.8352h10.461866v16.9984h-10.461866z"
                      fill="#996E28" p-id="4332" />
                    <path
                      d="M825.361067 580.642133a6.826667 6.826667 0 0 0-6.980267-3.618133l-158.0032 21.418667L680.2432 201.386667a6.826667 6.826667 0 0 0 0-1.058134v-1.109333a6.826667 6.826667 0 0 0-6.826667-7.168H405.1968a6.826667 6.826667 0 0 0-6.826667 7.168v1.109333a6.826667 6.826667 0 0 0 0 1.058134l19.848534 397.038933-158.0032-21.4016a6.826667 6.826667 0 0 0-5.922134 11.4176l280.0128 301.277867a6.826667 6.826667 0 0 0 10.001067 0L824.32 588.424533a6.826667 6.826667 0 0 0 1.041067-7.7824z"
                      fill="#996E28" p-id="4333" />
                    <path
                      d="M339.780267 523.7248H103.6288a17.066667 17.066667 0 1 1 0-34.133333h236.151467a13.380267 13.380267 0 1 0 0-26.760534h-33.467734a44.782933 44.782933 0 1 1 0.631467-89.565866h238.250667a17.066667 17.066667 0 0 1 0 34.133333h-238.250667a11.093333 11.093333 0 0 0-11.229867 9.5744 10.717867 10.717867 0 0 0 10.5984 11.7248h33.467734a47.5136 47.5136 0 1 1 0 95.0272z"
                      fill="#D5382E" p-id="4334" />
                    <path
                      d="M545.194667 373.282133a17.066667 17.066667 0 0 1 0 34.133334h-238.250667a11.093333 11.093333 0 0 0-11.229867 9.5744 10.717867 10.717867 0 0 0 10.5984 11.7248h33.467734a47.5136 47.5136 0 1 1 0 95.0272H103.6288a17.066667 17.066667 0 1 1 0-34.133334h236.151467a13.380267 13.380267 0 1 0 0-26.760533h-33.467734a44.782933 44.782933 0 1 1 0.631467-89.565867h238.250667m0-10.24h-238.250667a55.022933 55.022933 0 1 0-0.631467 110.045867h33.467734a3.140267 3.140267 0 1 1 0 6.280533H103.6288a27.306667 27.306667 0 1 0 0 54.613334h236.151467a57.7536 57.7536 0 1 0 0-115.5072h-33.467734a0.512 0.512 0 0 1-0.290133-0.170667 0.3584 0.3584 0 0 1-0.119467-0.221867 1.416533 1.416533 0 0 1 1.041067-0.426666h238.250667a27.306667 27.306667 0 0 0 0-54.613334z"
                      fill="#E8D4AB" p-id="4335" />
                    <path d="M654.523733 591.854933h-1.5872l20.48-409.6H405.1968l20.48 409.6" fill="#AF3131"
                      p-id="4336" />
                    <path d="M654.523733 593.5616h-1.5872l20.48-409.6H405.1968l20.48 409.6" fill="#D5382E"
                      p-id="4337" />
                    <path
                      d="M654.523733 600.388267h-1.5872a6.826667 6.826667 0 0 1-6.826666-7.168l20.1216-402.432H412.3648l20.1216 402.432-13.653333 0.682666-20.48-409.6a6.826667 6.826667 0 0 1 6.826666-7.168h268.253867a6.826667 6.826667 0 0 1 6.826667 7.168l-20.48 409.6-5.239467-0.256z"
                      fill="#E8D4AB" p-id="4338" />
                    <path
                      d="M425.6768 589.704533l-166.365867-22.528L539.306667 868.471467l279.995733-301.294934-164.778667 22.528"
                      fill="#D5382E" p-id="4339" />
                    <path
                      d="M425.6768 591.4112l-166.365867-22.528L539.306667 870.178133l279.995733-301.294933-164.778667 22.528"
                      fill="#D5382E" p-id="4340" />
                    <path
                      d="M539.306667 874.837333a6.826667 6.826667 0 0 1-5.000534-2.184533L254.293333 571.357867a6.826667 6.826667 0 0 1 5.922134-11.4176l158.122666 21.418666-19.968-399.223466a6.826667 6.826667 0 0 1 6.826667-7.168h268.2368a6.826667 6.826667 0 0 1 6.826667 7.168l-19.968 399.240533 158.122666-21.435733a6.826667 6.826667 0 0 1 5.922134 11.4176L544.3072 872.6528a6.826667 6.826667 0 0 1-5.000533 2.184533zM277.2992 576.034133L539.306667 857.975467l262.007466-281.941334-147.3536 19.968a6.826667 6.826667 0 0 1-7.7312-7.099733l20.0192-400.2816H412.3648l20.0192 400.264533a6.826667 6.826667 0 0 1-7.7312 7.099734z"
                      fill="#E8D4AB" p-id="4341" />
                    <path
                      d="M780.7488 226.338133h105.540267a17.066667 17.066667 0 0 1 0 34.133334h-105.540267a13.380267 13.380267 0 1 0 0 26.760533h8.0384a44.782933 44.782933 0 1 1 0.631467 89.565867H503.7056a17.066667 17.066667 0 0 1 0-34.133334h285.730133a10.717867 10.717867 0 0 0 10.5984-11.7248 11.076267 11.076267 0 0 0-11.229866-9.5744h-8.0384a47.5136 47.5136 0 1 1 0-95.0272z"
                      fill="#D5382E" p-id="4342" />
                    <path
                      d="M886.289067 226.338133a17.066667 17.066667 0 0 1 0 34.133334h-105.540267a13.380267 13.380267 0 1 0 0 26.760533h8.0384a44.782933 44.782933 0 1 1 0.631467 89.565867H503.7056a17.066667 17.066667 0 0 1 0-34.133334h285.730133a10.717867 10.717867 0 0 0 10.5984-11.7248 11.076267 11.076267 0 0 0-11.229866-9.5744h-8.0384a47.5136 47.5136 0 1 1 0-95.0272h105.540266m0-10.24h-105.557333a57.7536 57.7536 0 1 0 0 115.5072h8.0384a1.416533 1.416533 0 0 1 1.041067 0.426667 0.341333 0.341333 0 0 1-0.119467 0.221867 0.802133 0.802133 0 0 1-0.221867 0.170666H503.7056a27.306667 27.306667 0 0 0 0 54.613334h285.730133a55.022933 55.022933 0 1 0-0.631466-110.045867h-8.0384a3.140267 3.140267 0 1 1 0-6.280533h105.540266a27.306667 27.306667 0 0 0 0-54.613334z"
                      fill="#E8D4AB" p-id="4343" />
                  </svg></span>
              </div>
            </div>
            <div class="echart" ref="mychart1" id="mychart1" :style="{
              width: '100%',
              height: '200px',
              marginBottom: '15px',
              border: '1px solid #efefef',
              borderRadius: '5px',
            }"></div>
          </div>
        </div>
        <!--  表格 -->
        <el-table :data="tableData" style="width: 100%" border :default-sort="{ prop: 'date', order: 'descending' }">
          <el-table-column type="index" label="排名" width="80">
          </el-table-column>
          <el-table-column prop="keyword" label="搜索关键字" width="180">
          </el-table-column>
          <el-table-column prop="number" label="用户数" sortable>
          </el-table-column>
          <el-table-column prop="weekup" label="周涨幅" sortable>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination layout="prev, pager, next" :total="1000">
        </el-pagination>
      </el-card>
    </el-col>

    <el-col :span="12">
      <el-card style="width: 100%; margin-top: 10px;display: flex;flex-direction: column;">
        <div class="header">
          <span class="span-title">销售额</span>
          <svg t="1637478175000" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2179" width="26" height="26">
            <path
              d="M536 480v192a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V480a16 16 0 0 1 16-16h16a16 16 0 0 1 16 16z m-32-128h16a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16z m8 448c159.056 0 288-128.944 288-288s-128.944-288-288-288-288 128.944-288 288 128.944 288 288 288z m0 48c-185.568 0-336-150.432-336-336s150.432-336 336-336 336 150.432 336 336-150.432 336-336 336z"
              p-id="2180" fill="#8a8a8a"></path>
          </svg>
          <div class="title" style="margin-left: 20px;">
            <el-radio-group v-model="value">
              <el-radio-button label="全部渠道"></el-radio-button>
              <el-radio-button label="线上"></el-radio-button>
              <el-radio-button label="门店"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="echart" ref="mychart2" id="mychart2" :style="{
          float: 'left',
          width: '800px',
          height: '350px',
          margin: '20px',
          padding: '20px',
        }"></div>
      </el-card>
    </el-col>
  </el-row>


  <el-row :gutter="10">
    <el-col>
      <el-card style="margin-top: 10px;">
        <div class="header">
          <span class="span-title">用户访问来源</span>
          <svg t="1637478175000" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2179" width="26" height="26">
            <path
              d="M536 480v192a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V480a16 16 0 0 1 16-16h16a16 16 0 0 1 16 16z m-32-128h16a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16z m8 448c159.056 0 288-128.944 288-288s-128.944-288-288-288-288 128.944-288 288 128.944 288 288 288z m0 48c-185.568 0-336-150.432-336-336s150.432-336 336-336 336 150.432 336 336-150.432 336-336 336z"
              p-id="2180" fill="#8a8a8a"></path>
          </svg>
        </div>
        <div class="echart" ref="mychart3" id="mychart3" :style="{
          float: 'left',
          width: '100%',
          height: '400px',
          border: '1px solid #ccc',
          borderRadius: '20px',
          margin: '20px',
          padding: '20px',
        }"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
import LineIndex from "@/views/dashboard/sale/card2/LineIndex";

export default {
  name: "SaleIndex",
  components: {
    LineIndex,
  },
  data() {
    return {
      mycharts: [],
      tableData: [{
        date: '',
        keyword: ' ',
        number: ' ',
        weekup: ''
      }]
    };
  },
  mounted() {
    this.initEcharts();
    this.initEcharts2();
    this.initEcharts3();
  },
  methods: {
    initEcharts() {
      let mychart1 = echarts.init(this.$refs.mychart1);
      let option1 = {
        // title: {
        //   text: "访问量",
        //   left: "center",
        // },
        tooltip: {
          show: true,
          trigger: "axis", // 触发类型
          axisPointer: {
            type: "cross", // 坐标轴指示器类型，直线指示器
            crossStyle: {
              color: "#999"
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true, // 坐标轴两边留白策略
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          show: false
        },
        series: [
          {
            name: '人均搜索数',
            type: 'line',
            data: [110, 97, 133, 102, 148, 89, 129, 110, 144, 125, 110, 140],
            // 拐点的样式的设置
            itemStyle: {
              opacity: 1 // 0 表示完全透明，1 表示不透明
            },
            // 线条的样式
            lineStyle: {
              color: 'blue'
            },
            // 填充颜色设置
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'blue' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ],
        grid: {
          left: 5,
          top: 5,
          right: 15,
          bottom: 20,
        },
      };
      mychart1.setOption(option1);
      // this.mycharts.push(mychart1);
      // 随窗口大小改变自适应
      window.onresize = () => {
        mychart1.resize();
      };
    },


    // 第二个图表--饼图
    initEcharts2() {
      const option = {
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c} ({d}%)", // 格式化显示
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "直接访问",
            "邮件营销",
            "联盟广告",
            "视频广告",
            "搜索引擎",
            "百度",
            "谷歌",
            "其他",
          ],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 200, name: "联盟广告" },
              { value: 268, name: "视频广告" },
              { value: 350, name: "百度" },
              { value: 100, name: "谷歌" },
              { value: 100, name: "其他" },
              { value: 1548, name: "搜索引擎" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      const myChart2 = echarts.init(this.$refs.mychart2);
      myChart2.setOption(option);
      window.addEventListener("resize", () => {
        myChart2.resize();
      });

      let currentIndex = -1;
      setInterval(function () {
        let dataLen = option.series[0].data.length;
        //取消之前高亮的图像
        myChart2.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        currentIndex = (currentIndex + 1) % dataLen;
        //高亮当前图像
        myChart2.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        //显示tooptip
        myChart2.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
      }, 2000);
    },

    // 第三个图表--折线图
    initEcharts3() {
      const option = {
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          x: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          left: "left",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        // 颜色设置
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            data: [10, 12, 13, 10, 10, 10, 10],
          },
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            data: [10, 12, 13, 10, 10, 10, 10],
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            data: [10, 12, 13, 10, 10, 10, 10],
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            data: [10, 12, 13, 10, 10, 10, 10],
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            data: [10, 12, 18, 20, 17, 13, 10],
          },
        ],
      };
      const myChart3 = echarts.init(this.$refs.mychart3);
      myChart3.setOption(option); // 渲染页面
      window.addEventListener("resize", () => {
        // 随着屏幕大小调节图表
        myChart3.resize();
      });
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e9e5e5;
}

.span-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0px 10px 3px 3px;
}

.main {
  display: flex;
  font-size: 18px;
  margin: 20px;
}

.echartcard {
  width: 100%;
  display: flex;
  margin-top: 10px;
}
</style>